<template>
  <el-card class="page-container">
    <div class="inspection-container">
      <div class="content-wrapper">
        <h2 class="page-title">在线邮件检测</h2>
        <p class="subtitle">快速识别垃圾邮件，保护您的邮箱安全</p>

        <div class="input-section">
          <el-input v-model="emailContent" type="textarea" :rows="8" placeholder="请输入需要检测的邮件内容..." class="content-input"
            resize="none" />

          <el-button type="primary" :loading="analyzing" @click="handleAnalyze" class="analyze-btn"
            :disabled="!emailContent.trim()">
            <div class="btn-content">
              <el-icon class="analyze-icon">
                <Search />
              </el-icon>
              <span>开始检测</span>
            </div>
          </el-button>
        </div>

        <!-- 分析结果弹窗 -->
        <el-dialog v-model="showResult" title="检测结果" width="500px" :show-close="false" :close-on-click-modal="false"
          class="result-dialog" destroy-on-close>
          <div class="result-container" v-loading="showLoading">
            <template v-if="!showLoading">
              <div class="result-icon" :class="analysisResult.type">
                <el-icon :size="48">
                  <Warning v-if="analysisResult.type === 'spam'" />
                  <CircleCheckFilled v-else />
                </el-icon>
              </div>
              <div class="result-text">
                <h3>{{ analysisResult.title }}</h3>
                <div class="accuracy-info">
                  <el-progress type="dashboard" :percentage="analysisResult.accuracy" :color="progressColor" />
                  <p class="accuracy-text">检测准确率</p>
                </div>
              </div>
            </template>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="resetAnalysis">重新检测</el-button>
              <el-button type="primary" @click="showResult = false">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Warning, CircleCheckFilled, Search } from '@element-plus/icons-vue'

// 响应式状态
const emailContent = ref('')
const analyzing = ref(false)
const showResult = ref(false)
const showLoading = ref(false)
const analysisResult = ref({
  type: '',
  title: '',
  accuracy: 0
})

// 进度条颜色计算
const progressColor = computed(() => {
  return {
    0: '#909399',
    60: '#E6A23C',
    80: '#67C23A',
    100: '#409EFF'
  }
})

// 处理分析按钮点击
const handleAnalyze = async () => {
  if (!emailContent.value.trim()) {
    ElMessage.warning('请输入邮件内容')
    return
  }

  analyzing.value = true

  try {
    // 显示确认对话框
    await ElMessageBox.confirm(
      '确定要检测这封邮件吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
        draggable: true
      }
    )

    showResult.value = true
    showLoading.value = true

    // 模拟分析过程
    setTimeout(() => {
      showLoading.value = false
      // 模拟结果（这里随机生成结果，实际应该由后端返回）
      const isSpam = Math.random() > 0.5
      analysisResult.value = {
        type: isSpam ? 'spam' : 'normal',
        title: isSpam ? '垃圾邮件' : '正常邮件',
        accuracy: Math.floor(85 + Math.random() * 10)
      }
    }, 2000)

  } catch (e) {
    // 用户取消分析
    console.log('用户取消分析')
  } finally {
    analyzing.value = false
  }
}

// 修改关闭结果弹窗的方法
const handleClose = () => {
  showResult.value = false
}

// 重置分析
const resetAnalysis = () => {
  emailContent.value = ''
  showResult.value = false
  analysisResult.value = {
    type: '',
    title: '',
    accuracy: 0
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  margin: 20px;
}

.inspection-container {
  padding: 20px 0;

  .content-wrapper {
    max-width: 800px;
    margin: 0 auto;

    .page-title {
      text-align: center;
      margin-bottom: 10px;
      font-size: 28px;
      color: #2c3e50;
      font-weight: 600;
    }

    .subtitle {
      text-align: center;
      color: #606266;
      margin-bottom: 30px;
      font-size: 14px;
    }

    .input-section {
      .content-input {
        margin-bottom: 30px;

        :deep(.el-textarea__inner) {
          padding: 15px;
          border-radius: 8px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s;

          &:focus {
            border-color: #409EFF;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
          }
        }
      }

      .analyze-btn {
        display: block;
        margin: 0 auto;
        padding: 0 40px;
        height: 44px;
        border-radius: 22px;
        font-size: 16px;
        transition: all 0.3s;

        .btn-content {
          display: flex;
          align-items: center;
          justify-content: center;

          .analyze-icon {
            margin-right: 8px;
            font-size: 18px;
          }
        }

        &:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
        }

        &:active:not(:disabled) {
          transform: translateY(1px);
        }
      }
    }
  }
}

.result-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;

    .el-dialog__header {
      margin: 0;
      padding: 20px;
      background: #f5f7fa;
      border-bottom: 1px solid #ebeef5;
    }

    .el-dialog__body {
      padding: 30px;
    }
  }

  .result-container {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .result-icon {
      margin-bottom: 25px;

      &.spam {
        color: #F56C6C;
      }

      &.normal {
        color: #67C23A;
      }
    }

    .result-text {
      text-align: center;

      h3 {
        margin-bottom: 25px;
        font-size: 24px;
        color: #2c3e50;
      }

      .accuracy-info {
        .accuracy-text {
          margin-top: 15px;
          color: #606266;
          font-size: 14px;
        }
      }
    }
  }
}

.dialog-footer {
  text-align: center;
  padding-top: 20px;

  .el-button {
    margin: 0 10px;
    min-width: 100px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .inspection-container {
    padding: 20px 10px;

    .content-wrapper {
      padding: 20px;

      .page-title {
        font-size: 24px;
      }
    }
  }
}
</style>